import * as echarts from "echarts";
import { useEffect, useRef } from "react";

const BarCharts = ({ title }: { title: string }) => {
  const charRef = useRef(null);

  useEffect(() => {
    type EChartsOption = echarts.EChartsOption;
    const charDom = charRef.current;
    const option: EChartsOption = {
      title: {
        text: title,
      },
      xAxis: {
        type: "category",
        data: ["vue", "react", "angular"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150],
          type: "bar",
        },
      ],
    };
    const myChart = echarts.init(charDom);
    option && myChart.setOption(option);
  }, [title]);
  return <div ref={charRef} style={{ width: "500px", height: "400px" }}></div>;
};
export default BarCharts;
